<template>
  <div class="enter-modal-container" v-if="visible">
    <a-modal destroyOnClose :title="title" :visible="visible" @cancel="onCancel">
      <template slot="footer">
        <div class="footer-body middle-flex">
          <div class="no-enter middle-flex">
            <a-checkbox @change="onCheckbox" :checked="check"></a-checkbox>
            <div class="text">不再提示</div>
          </div>
          <div class="btn">
            <a-button type="primary" @click="handleOk">确定</a-button>
            <a-button @click="onCancel">取消</a-button>
          </div>
        </div>
      </template>
      <slot v-if="isMiddle" name="middle"></slot>
      <div v-else class="info">{{info}}</div>
    </a-modal>
  </div>
</template>

<script>
import authority from '@/utils/authority'

export default {
  props: {
    title: {
      type: String,
      default: '操作'
    },
    value: {
      type: String,
      default: '',
    },
    info: {
      type: String,
      default: '您确定要这么操作嘛'
    }
  },
  data() {
    return {
      check: false,
      visible: false
    };
  },
  watch: {
    value() {
      this.init()
    }
  },
  computed: {
    isMiddle() {
      return this.$slots.middle && this.$slots.middle.length
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    onCancel() {
      this.visible = false
      this.$emit('close')
    },
    init() {
      if (!this.value) return
      let action = authority.get().action
      if (!action) {
        authority.set({
          ...authority.get(),
          action: { [this.value]: 0 }
        })
        this.visible = true
      } else {
        if (action[this.value]) {
          this.visible = false
          this.$emit('enter')
        } else {
          this.visible = true
        }
      }
    },
    onCheckbox(e) {
      this.check = e.target.checked
    },
    handleOk() {
      let auth = authority.get()
      let { action = {} } = auth
      authority.set({
        ...auth,
        action: {
          ...action,
          [this.value]: this.check ? 1 : 0
        }
      })
      this.visible = false
      this.$emit('enter')
    }
  },
}
</script>

<style lang="less" scoped>
.footer-body {
  justify-content: space-between;
  .text {
    margin-left: 5px;
  }
}
</style>
